<template>
  <div class="app-container" :style="setBgColor(albumpic_big)">
    <div class="equipment">
      <x-tabs
        title="选择设备"
        :list="equipmentList"
        label="equipmentName"
        :shadow="false"
        :required="true"
        @tab-click="changeEquipmen"
      />
      <el-form ref="selectSubject" :inline="true" :model="selectSubject">
        <el-form-item label="选择题库考试" prop="bankIndex">
          <el-select
            v-model="selectSubject.bankIndex"
            filterable
            multiple
            placeholder="请选择(可搜索)"
          >
            <el-option
              v-for="(item, index) in banks"
              :key="item.id"
              :label="item.bankName"
              :value="index"
            >
              {{ item.bankName }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goRandomTest()">开始训练</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 训练记录表格 -->
    <div class="table">
      <div class="table-title">考卷列表</div>
      <el-table
        v-loading="listLoading"
        :data="examList"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        border
        highlight-current-row
      >
        <!-- 序号 -->
        <el-table-column
          align="center"
          label="序号"
          type="index"
          :index="table_index"
        />
        <!-- 考卷名称 -->
        <el-table-column label="考卷名称" width="350" align="left">
          <template slot-scope="scope">
            {{ scope.row.examName || '-' }}
          </template>
        </el-table-column>
        <!-- 总分 -->
        <el-table-column
          label="总分"
          prop="totalScore"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.totalScore }}</span>
          </template>
        </el-table-column>

        <!-- 状态 -->
        <el-table-column label="状态" prop="status" align="center" width="250">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">
              {{
                scope.row.status === 0
                  ? '未考'
                  : '已考：' + scope.row.passScore + '分'
              }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 考试时长 -->
        <el-table-column
          prop="duration"
          label="考试时长"
          align="left"
          width="200"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.duration }}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column align="center" prop="ctrl" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button
              :type="scope.row.status === 0 ? 'primary' : 'success'"
              @click="goTest(scope.row.status, examList[scope.$index])"
            >
              {{ scope.row.status === 0 ? '考试' : '查阅' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="pageNum"
      @current-change="changePage"
    />
  </div>
</template>

<script>
import { findBank, selectExamByUser } from '@/api/onlineExam'
import XTabs from '@/components/XTabs.vue'
import { getEquipment } from '@/api/report'
export default {
  name: 'OnlineExam',
  components: {
    XTabs
  },
  filters: {
    statusFilter(status) {
      const statusMap = ['info', '']
      return statusMap[status]
    }
  },
  data() {
    return {
      banks: [], // 题库
      selectSubject: {
        bankIndex: [] // 选中的题库
      },
      examList: null, // 训练记录
      total: 0, // 表格数据总条数
      pageNum: 1,
      pageSize: 10,
      listLoading: false, // 加载动画
      equipmentList: [], // 设备列表
      equipment: '', // 当前设备

      albumpic_big: '',

      topImg: {
        // 'PET/CT': require('../../assets/shebei_images/PETCT.jpg'),
        // 'SPECT/CT': require('../../assets/shebei_images/SPECT.jpg'),
        // 'PET/MR': require('../../assets/shebei_images/PETMR.jpg'),
        // 'BMD': require('../../assets/shebei_images/BMD.jpg'),
      }
    }
  },
  created() {
    console.log(111)
    sessionStorage.removeItem('kaoshi') //清除  考试存在的值
    this.getEquipmentData() //获取设备
  },
  methods: {
    setBgColor(bgColor) {
      if (bgColor === '' || bgColor === '' || bgColor === undefined) {
        return { background: 'url(' + bgColor + ') center center no-repeat' }
      } else {
        return { background: 'url(' + bgColor + ') center center no-repeat' }
      }
    },
    async getEquipmentData() {
      //获取设备数据
      let res = await getEquipment()
      console.log('获取设备数据', res)
      if (res.code == 200) {
        this.equipmentList = res.equipment.map((item) => {
          return { equipmentName: item.equipmentName, id: item.id }
        })
      }
    },
    changeEquipmen(e) {
      //选择设备标题
      console.log('设备', e)
      this.equipment = e
      this.getExamList() // 获取试卷列表
      this.getBanks() // 获取题库
      let str = e.item.equipmentName
      this.albumpic_big = this.topImg[str]
    },

    table_index(index) {
      return (this.pageNum - 1) * this.pageSize + index + 1
    },

    getBanks() {
      // 获取题库
      findBank({ questionEquipmentId: this.equipment.item.id })
        .then((res) => {
          console.log('库题', res)
          this.banks = res.data
        })
        .catch((err) => {
          console.log('获取题库失败', err)
        })
    },
    changePage(pageNum) {
      // 获取试卷列表
      this.pageNum = pageNum
      this.getExamList()
    },
    getExamList() {
      // 获取试卷列表
      this.listLoading = true // 加载动画
      selectExamByUser({
        questionEquipmentId: this.equipment.item.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then((res) => {
        console.log('获取试卷列表', res)
        this.total = res.total
        this.examList = res.rows
        this.listLoading = false // 关闭加载动画
      })
    },

    goRandomTest() {
      // 开始随机训练
      const readOnly = false
      sessionStorage.removeItem('kaoshi')
      if (this.selectSubject.bankIndex.length !== 0) {
        console.log('选择器索引:', this.selectSubject.bankIndex)
        const bankIds = this.selectSubject.bankIndex
          .map((item) => this.banks[item].id)
          .join(',')
        const questionEquipmentId =
          this.banks[this.selectSubject.bankIndex[0]].questionEquipmentId
        sessionStorage.setItem('onlineEquipmentId', questionEquipmentId)
        sessionStorage.removeItem('curTime')

        const newTab = this.$router.resolve({
          name: 'TestPage',
          params: {
            bankIds,
            questionEquipmentId,
            examId: false,
            readOnly
          },
          query: {
            examName: ''
          }
        })
        window.open(newTab.href, '_blank')
      }
    },
    goTest(operation, itemData) {
      console.log(operation, itemData)
      sessionStorage.removeItem('curTime')
      let readOnly = false
      if (operation === 1) {
        readOnly = true
      } else {
        itemData.examId = itemData.id
        sessionStorage.setItem('kaoshi', JSON.stringify(itemData))
        console.log('考试')
      }
      const newTab = this.$router.resolve({
        name: 'TestPage',
        params: {
          bankIds: false,
          questionEquipmentId: false,
          examId: itemData.id,
          readOnly
        },
        query: {
          examName: itemData.examName
        }
      })
      window.open(newTab.href, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.table-title {
  height: 60px;
  width: 825px;
  line-height: 60px;
  font-weight: 700;
  color: #909399;
  box-sizing: border-box;
  border: 1px solid #ebeef5;
  border-bottom: 0px;
  padding: 0px 20px;
}
.table {
  box-shadow: -4px 4px 25px 5px rgba(55, 54, 54, 0.217);
  width: 90%;
}
::v-deep .el-table {
  width: 100%;
  height: 100%;
}

.doExam,
.browse {
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.doExam {
  color: #409eff;
}

.browse {
  color: #606266;
}

.equipment {
  border-radius: 15px;
  background: #e5f5ff;
  box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  width: 87%;
  margin: 10px 0;
  padding: 0 25px;
}

.app-container {
  min-height: calc(100vh - 60px);
  box-sizing: border-box;
  // background: url('../../assets/shebei_images/BMD.jpg') center center no-repeat;
  width: 100%;
  background-size: 100% 100% !important;

  .tabs-container {
    background-color: rgba(0, 0, 0, 0);
  }
}
</style>
